<template>
	<view class="login" >
		<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/9a9198e81b1e4e6195d95b0374aa95d7.png" style="width:100vw"></image>
		<view class="nr">
			<view class="list">
				<image src="../../static/images/phone.png" mode="" placeholder-style="color: #4C6288;"></image>
				<input type="number" v-model="login"  style="border-radius: 65rpx;height: 100rpx;font-size: 35rpx;" placeholder="请输入手机号" />
			</view>
			<view class="list">
				<image src="../../static/images/password.png" mode="" placeholder-style="color: #4C6288;"></image>
				<input type="text" v-model="password" style="border-radius: 65rpx;height: 100rpx;font-size: 35rpx;" placeholder="请输入密码" password/>
			</view>
			<view class="sub" @click="gologin()">登录</view>
			<view class="bottom">
				<view class="left" style="font-size: 32rpx;" @click="gopassword">忘记密码？</view>
				<view class="right" style="font-size: 32rpx;" @click="goregister">注册账户</view>
			</view>
			<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/why_logo1.png" mode="" class="logo"></image>
		</view>
		
	</view>
</template>

<script>
import login from '../../servers/login.js';
import config from '../../servers/config.js'
export default {
	data() {
		return {
			login:'',
			password:'',
			islogin:false ,
			codeForm:{
				code:''
			}
		};
	},
	mounted() {
		//#ifndef H5
		 this.islogin=true;
		 console.log("去登录")
		 // this._login();
		 //#endif
		
	},
	
	methods: {
		gologin() {
				uni.showLoading({
				    title: '正在登录中',
					mask:true
				});
			 let _this=this
			login
				.loginByMoblie({
					mobile: this.login,
					password: this.password
				})
				.then(res => {
					if(res.code == 200){
						uni.setStorageSync('Authorization', 'Bearer ' + res.token);
						uni.setStorageSync('STATION_AUTH',  res.STATION_AUTH);
						 // #ifdef MP-WEIXIN
						 uni.login({
						     provider: 'weixin',
						     success: function (loginRes) {
						         console.log(JSON.stringify(loginRes));
						 		
								_this.getcode(loginRes.code)//绑定
								},
								});
						// #endif
					}
					
				});
				uni.hideLoading();
		},
		
		goregister(){
			uni.navigateTo({
			    url: './register'
			});
		},
		gopassword(){
			uni.navigateTo({
			    url: './password'
			});
		},
		getcode(e){
			login.loginbindMobile({
				phone: this.login,
				code:e
			}).then(res => {
				uni.switchTab({
				    url: './my'
				});
			})
		}
	}
};
</script>

<style lang="less" scoped>
.login {
	position: relative;
	height: 100vh;
	.bg {
		width: 750rpx;
		height: 499rpx;
	}
	.logo {
		position: absolute;
		    bottom: 139rpx;
		    left: 50%;
		    width: 425rpx;
		    height: 174rpx;
		    margin-left: -214rpx;
	}	
	.nr {		
		position: absolute;
		top: 492rpx;
		left: 25rpx;
		right: 25rpx;
		bottom: 25rpx;
		z-index: 9;
		background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
		border-radius: 20rpx;
		padding: 100rpx 30rpx 0;
		margin: -68rpx auto 0;
		
		
		.list {
			position: relative;
			margin-bottom: 50rpx;
			border-radius: 4rpx;
			overflow: hidden;
			image {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
			}
			input {
				padding-left: 100rpx;
				height: 80rpx;
				background: #fff;
				font-size: 24rpx;
			}
		}
		.sub {
				height: 97rpx;
			    line-height: 97rpx;
			    border-radius: 97rpx;
			    color: #fff;
			    background: #2d3c63;
			    text-align: center;
			    margin-top: 87rpx;
			
		}
		.bottom {
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			right: 30rpx;
			font-size: 24rpx;
			height: 30rpx;
			color: #ffffff;
			.left{
				float: left;
			}
			.right {
				float: right;
			}
		}
	}
}
</style>
